<template>
  <div :class="ns.b()">
    <header :class="ns.e('header')">
      <div :class="ns.e('header-main')">
        <div :class="ns.e('header-logo')">
          <img :src="logo" alt="" />
          <div :class="ns.e('header-name')">收银台</div>
        </div>

        <div :class="ns.e('header-user')">
          <img :src="avatar" alt="" :class="ns.e('header-avatar')" />
          {{ orderInfo?.userName }}
        </div>
      </div>
    </header>

    <!-- 主体商品展示区域 -->
    <main :class="ns.e('main')">
      <!-- 背景 -->
      <div :class="ns.e('main-bg')">
        <img :src="cashierBg" alt="" />
      </div>

      <div :class="ns.e('main-body')">
        <!-- 价格展示及倒计时 -->
        <div :class="ns.e('main-price')">
          <p class="money text-red">
            ￥
            <span class="font-gilroy-bold">{{ orderInfo?.shouldPay }}</span>
          </p>

          <div class="time" v-if="showDown">
            剩余
            <span>
              <Countdown
                :time="Number(orderInfo?.remainingExpireTime)"
                :text-width="24"
                @finish="onFinish"
              />
            </span>
            交易关闭
          </div>
          <p v-else class="time time-end">交易关闭</p>
        </div>

        <div :class="ns.e('main-preview')">
          <!-- 订单信息 -->
          <div :class="ns.e('main-order')">
            <p :class="ns.e('main-title')">订单信息</p>
            <ul :class="ns.em('main-order', 'info')">
              <li>
                <p class="label">订单编号</p>
                <p class="value">
                  <span v-if="orderInfo?.orderSn">{{ orderInfo?.orderSn }}</span>
                  <!-- 购物车展示信息 -->
                  <span v-if="orderInfo?.orderSns" class="flex align-center">
                    <span class="max-w-[173px] line-clamp-1">{{ orderInfo?.orderSns[0] }}</span
                    >{{ orderInfo?.orderSns.length > 1 ? '等' : '' }}共计
                    <span class="text-red px-[4px]"> {{ orderInfo?.orderSns?.length }} </span>
                    笔订单
                  </span>
                </p>
              </li>
              <li>
                <p class="label">商品名称</p>
                <div class="value">
                  <p v-if="orderInfo?.goodsTitles" class="flex align-center">
                    <span class="max-w-[840px] line-clamp-1">{{ orderInfo?.goodsTitles[0] }}</span>
                    {{ orderInfo?.goodsTitles.length > 1 ? '等' : '' }}共计
                    <span class="text-red px-[4px]">
                      {{ orderInfo?.goodsTitles?.length }}
                    </span>
                    件商品
                  </p>
                </div>
              </li>
            </ul>
          </div>

          <!-- 支付方式 -->
          <div
            v-if="orderInfo?.orderType === OrderType.TRANSFER || showDown"
            class="border-top border-[#eee]"
          >
            <div :class="ns.e('main-pay')">
              <p :class="ns.e('main-title')">支付方式</p>
              <PayModel :settleMode="settleMode" @change="payModelChange"></PayModel>
            </div>

            <!-- 立即支付 -->
            <button :class="ns.e('main-pay-btn')" @click="payClick">立即支付</button>
          </div>
        </div>
      </div>
    </main>

    <wxPayDialog
      v-if="orderInfo?.shouldPay"
      v-model:show="payDialog"
      :url="payUrl"
      :money="orderInfo?.shouldPay!"
    />
  </div>
</template>

<script setup lang="ts">
// hooks
import { useNamespace } from '../../../shared/index'
import { useLogoEffect } from '../../../shared/hooks/useLogoEffect'
import { useOrderEffect } from '../../../shared/hooks/useOrderEffect'
import { usePayEffect } from '../../../shared/hooks/usePayEffect'
import { useThemeEffect } from '../hooks/useTheme'
// img
import defaultAvatar from '@/assets/images/user/default-avatar.png'
import cashierBg from '@/assets/images/cashier/cashier-bg-top.png'

//components
import Countdown from '../../../shared/components/Countdown/index.vue'
import PayModel from '../components/PayModel.vue'
import wxPayDialog from '../components/wxPayDialog/index.vue'

// enums
import { PayMode, OrderType, OrderSource } from '../../../shared/enums'

// cssNamespace
const ns = useNamespace('cashiering')
// 获取logo
const { logo } = useLogoEffect()

useThemeEffect()

// 支付类型
const settleMode = ref(PayMode.WX_NATIVE)
/**
 * @description 切换支付类型
 */
const payModelChange = (val: PayMode): void => {
  settleMode.value = val
}

/**
 * @description 获取订单信息
 */
const { orderInfo, excludeZeroOrder } = useOrderEffect()

// 用户头像
const avatar = computed(() => {
  return orderInfo.photo || defaultAvatar
})

/**
 * @description 倒计时结束
 */
const countDownOver = ref(false)
const onFinish = (): void => {
  countDownOver.value = true
}

/**
 * @description 是否展示倒计时
 */
const showDown = computed(() => {
  return Number(orderInfo.value?.remainingExpireTime) && !countDownOver.value
})

/**
 * @description 支付
 */
const { handlePay } = usePayEffect({
  excludeZeroOrder,
  orderSource: OrderSource.KukeOnlineOrder,
  settleMode: settleMode
})

// 展示微信支付弹窗
const payDialog = ref(false)
const payUrl = ref('')
const payClick = async () => {
  const data = await handlePay()
  if (data) {
    payDialog.value = true
    payUrl.value = data!.payInfo
  }
}
</script>

<style scoped lang="scss">
.kc-cashiering {
  &__header {
    min-width: 1200px;
    width: 100%;
    height: 80px;
    background: #ffffff;
    box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.06);
    &-main {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-left: auto;
      margin-right: auto;
      height: 100%;
      width: 1200px;
      min-width: 1200px;
    }
    &-logo {
      display: flex;
      img {
        height: 30px;
      }
    }
    &-name {
      margin-left: 14px;
      font-size: 18px;
      font-weight: 500;
      line-height: 31px;
      color: #111111;
    }
    &-user {
      @apply flex items-center text-[#111];
      font-size: 16px;
      font-weight: 400;
    }
    &-avatar {
      @apply w-[40px] h-[40px] rounded-[50%] mr-[8px];
    }
  }
  &__main {
    @apply relative;
    &-bg {
      position: absolute;
      top: 0;
      left: 0px;
      right: 0px;
      min-width: 1200px;
    }
    &-title {
      color: #111;
      font-size: 18px;
      font-weight: 500;
    }
    &-body {
      position: absolute;
      top: 0;
      left: 0px;
      right: 0px;
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    // 价格展示
    &-price {
      padding-top: 96px;
      height: 274px;
      .money {
        text-align: center;
        font-size: 24px;
        font-weight: 500;
        line-height: 40px;

        span {
          font-size: 40px;
          font-weight: 600;
        }
      }
      .time {
        margin-top: 16px;
        display: flex;
        align-items: center;

        color: #999;
        font-weight: 400;
        & > span {
          margin-right: 4px;
        }
      }
      .time-end {
        font-size: 14px;
        justify-content: center;
      }
    }

    // 订单预览
    &-preview {
      width: 1200px;
      min-width: 1200px;
      margin: 0 auto;
      border-radius: 12px;
      padding: 24px 24px 0px;
      background: #fff;
    }

    // 订单
    &-order {
      &--info {
        padding-top: 8px;
        padding-bottom: 48px;

        li {
          display: flex;
          margin-top: 8px;
          .label {
            color: #999;
            font-weight: 400;
            width: 104px;
          }
          .value {
            color: #111;
            font-weight: 500;
          }
        }
      }
    }
    //
    &-pay {
      display: flex;
      justify-content: space-between;
      padding-top: 48px;
    }
    &-pay-btn {
      margin: 48px 0;

      float: right;
      border: 1px solid #ddd;

      box-sizing: border-box;
      cursor: pointer;
      display: inline-block;

      width: 144px;
      height: 48px;

      outline: none;
      padding: 0 14px;
      text-align: center;
      user-select: none;
      white-space: nowrap;
      border-radius: 12px;
      font-size: 20px;
      font-weight: 500;
      background: var(--kc-system-theme-color);
      color: rgb(255, 255, 255);
    }
  }
}
</style>
